<template>
    <div>

        客户：
        <el-input v-model="otherInForm.customerName" style="width: 150px;margin-left: px;margin-right: 20px;"
            placeholder="请输入客户编号" clearable>
        </el-input>
        <el-button slot="reference" style="margin-left:-20px;margin-right:10px"
            @click="dialogFormVisible = true">...</el-button>
        <el-dialog top="20px" title="" :visible.sync="dialogFormVisible">
            <ClientChoose ref="clientChoose" />
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogFormVisible1()">确 定</el-button>
            </div>
        </el-dialog>
        业务员：
        <el-select v-model="value" placeholder="业务员" style="width: 100px;margin-right: 20px;">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
        </el-select>
        <span class="demonstration" style="margin-left: 20px;">单据日期:</span>
        <el-date-picker v-model="selectedDate" align="right" type="date" placeholder="选择日期"
            :picker-options="pickerOptions" @change="handleDateChange" style="margin-left: 10px;"></el-date-picker>

        <div style="float: right; margin-top:  0px;">
            <i class="el-icon-paperclip" style="color: blue;margin-left: 40px"></i>
            <sapn style="color: blue;">上传附件</sapn>
            <span style="margin-left: 10px;">单据编号:</span>
            <el-input style="width: 120px;margin-left: 10px;margin-right: 20px;" placeholder="" clearable disabled>
            </el-input>
            <el-dropdown>
                <span class="el-dropdown-link">
                    <i class="el-icon-edit"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item>SKDYYYYMMDD</el-dropdown-item>
                    <el-dropdown-item>狮子头</el-dropdown-item>
                    <el-dropdown-item>螺蛳粉</el-dropdown-item>
                    <el-dropdown-item disabled>双皮奶</el-dropdown-item>
                    <el-dropdown-item divided>蚵仔煎</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>
        <hr style="margin-top: 10px">
        <div style="margin-top: 10px;float: right">
            <el-button @click="update()">保存</el-button><el-button type="success">审核</el-button><el-button
                type="warning">反审核</el-button><el-button type="primary">提交</el-button>
        </div>
        <div style="clear: both;"></div>
        <div style="clear: both"></div>


        <el-table height="300px" :data="tableData" border style="width: 100%; font-size: 13px;margin-top: 10px;">
            <el-table-column fixed label="" width="50">
                <i class="el-icon-circle-plus-outline" style="margin-left: 8px;" @click="addRow()"></i>
                <br>
                <i class="el-icon-remove-outline" style="margin-left: 8px;"></i>
            </el-table-column>
            <el-table-column fixed label="收入类别" width="250">
                <template slot-scope="scope">
                    <el-select v-model="scope.row.typeId" placeholder="收入类别" style="width: 150px;">
                        <el-option v-for="item in getList" :key="item.typeId" :label="item.typeName"
                            :value="item.typeId">
                        </el-option>
                    </el-select>
                </template>
            </el-table-column>
            <el-table-column label="金额" width="140">
                <template slot-scope="scope">
                    <el-input v-model="scope.row.money" style="width: 100px;margin-left: 10px;margin-right: 20px;"
                        placeholder="金额" clearable>
                    </el-input>
                </template>
            </el-table-column>
            <el-table-column label="备注" width="400">
                <template slot-scope="scope">
                    <el-input v-model="scope.row.remark" style="width: 250px;margin-left: 10px;margin-right: 20px;"
                        placeholder="备注" clearable>
                    </el-input>
                </template>
            </el-table-column>

        </el-table>
        <div style="width: 100%;background-color: blanchedalmond;height: 30px;">
            <table style="width: 78.7%;height: 30px;">
                <tr>
                    <td style="width: 50%;">合计：</td>
                    <td style="width: 50%;">123</td>
                </tr>
            </table>
        </div>
        <el-input type="textarea" :rows="2" placeholder="暂无备注信息" v-model="otherInForm.remark"
            style="width: 100%;line-height: 20px;margin-top: 10px">

        </el-input>
        <div style="margin-top: 10px;">


            结算账户：

            <el-select v-model="otherInForm.accountId" placeholder="结算账户" style="width: 100px;margin-right: 20px">
                <el-option v-for=" item in accounts" :key="item.accountId" :label="item.accountName"
                    :value="item.accountId">
                </el-option>
            </el-select>

            收款金额：
            <el-input v-model="otherInForm.totalMoney" style="width: 120px;  margin-right: 20px" placeholder="收款金额"
                clearable>
            </el-input>
            本次欠款：
            <el-input style="width: 120px;  margin-right: 20px" placeholder="本次欠款" clearable disabled>
            </el-input>
            <span style="float: right;margin-right: 20px;">
                <el-button @click="goto('OtherInHistory')">历史单据</el-button><el-button>操作日志</el-button>
            </span>
        </div>
    </div>

</template>

<script>
import ClientChoose from '../public_com/ClientChoose.vue';
import Top from './Top.vue';

export default {
    name: "WriteOff",
    components:
    {
        Top,
        ClientChoose
    },
    data() {
        return {
            id: "",
            dialogFormVisible: false,
            choose: false,
            choose1: false,
            path: "",
            getList: "",
            accounts: "",
            selectedDate: "",
            otherInForm: {
                accountId: "",
                id: "",
                receiveOrderId: "",
                orderDate: "",
                customerId: "",
                customerCode: "",
                customerName: "",
                totalMoney: "",
                reivedMoney: 0,
                reivedStatus: "",
                checkId: "",
                remark: "",
                doId: "",
                yid: "",
                accountId: "",
            },

            pickerOptions: {
                disabledDate(time) {
                    return time.getTime() > Date.now();
                },
                shortcuts: [{
                    text: '今天',
                    onClick(picker) {
                        picker.$emit('pick', new Date());
                    }
                }, {
                    text: '昨天',
                    onClick(picker) {
                        const date = new Date();
                        date.setTime(date.getTime() - 3600 * 1000 * 24);
                        picker.$emit('pick', date);
                    }
                }, {
                    text: '一周前',
                    onClick(picker) {
                        const date = new Date();
                        date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', date);
                    }
                }]
            },
            tableData: [{
                typeId: '',
                money: '',
                remark: '',
            }],

            value1: '',
            value2: '',
        };
    },
    computed: {
        getTotalMoney() {
            let money = 0;
            this.tableData.forEach(item => {
                money += parseFloat(item.money) || 0; // 确保转换为数值，如果不是数值则为0
            });
            this.otherInForm.totalMoney = money;
            return this.otherInForm.totalMoney;
        }
    },
    watch: {
        // 监听tableData中的每一项，当money变化时更新totalMoney
        'tableData': {
            handler: 'updateTotalMoney',
            deep: true
        }
    },
    methods: {
        updateTotalMoney() {
            this.getTotalMoney();
        },
        searchPage1: function (pageNum, pageSize) {
            console.log(this.checkStatus)
            this.axios({
                url: "/cash/otherInForm/otherInByPage",
                params: {
                    pageNum: pageNum,
                    pageSize: pageSize,
                    id: this.id
                }
            }).then(rs => {
                console.log(rs.data)
                this.otherInForm = rs.data.pageInfo.list[0]
                alert("1")
            })
        },
        selectByInForm: function () {
            this.axios({
                url: "/cash/iDetail/selectByInFormId",
                params: {
                    inFormId: this.id
                }
            }).then(rs => {
                console.log(rs)

                this.tableData = rs.data.list
            })
        },

        handleDateChange(value) {
            // value 即为选中的日期值
            console.log('选中的日期是：', value);
            this.otherInForm.orderDate = value
            // 在这里可以执行更多的逻辑，比如更新数据、调用 API 等
        },
        update: function () {
            const reg = /^([1-9]\d*(\.\d{1,2})?|0\.\d{1,2})$/
            if (this.otherInForm.customerId === "") {
                alert("请选择客户")
                return
            }
            if (this.otherInForm.orderDate === "") {
                alert("请选择日期")
                return
            }
            if (this.otherInForm.accountId === "") {
                alert("结算账户")
                return
            }
            // if (this.otherInForm.receiveOrderId === "") {
            //     alert("请选择单据编号不能为空")
            //     return
            // }
            for (const contact of this.tableData) {
                if (contact.typeId === "") {
                    alert("请选择收入类别")
                    return
                }
                if (contact.money === "") {
                    alert("请填写收款金额")
                    return
                }
                if (isNaN(contact.money)) {
                    alert("收款金额必须为数字")
                    contact.money
                    return
                }
                if (!reg.test(contact.money)) {
                    alert("收款金额不符合规范")
                    return
                }
            }

            console.log(this.tableData)
            console.log(this.otherInForm)
            // for (var i = 0; i < this.tableData.length; i++) {
            //     this.otherInForm.writeoffMoney += this.tableData[i].money
            // }
            // alert(this.otherInForm.writeoffMoney)
            // return
            const formData = new FormData();
            formData.append('otherInForm', JSON.stringify(this.otherInForm))
            formData.append('list', JSON.stringify(this.tableData));
            this.axios.post(
                "/cash/otherInForm/update",
                formData,
                {
                    headers: {
                        'Content-Type': 'application/json'
                    }
                }
            ).then(rs => {
                console.log(rs)
                if (rs.data.code === 200) {
                    alert("保存成功")
                } else {
                    alert("保存失败")
                }
            })
        },
        dialogFormVisible1: function () {
            this.dialogFormVisible = false
            const id = this.$refs.clientChoose.clientId
            this.otherInForm.customerId = id
            console.log(this.$refs.clientChoose.clientName)
            this.otherInForm.customerCode = this.$refs.clientChoose.clientCode
            console.log(this.otherInForm.customerCode)
            this.otherInForm.customerName = this.$refs.clientChoose.clientName
            console.log(this.otherInForm.customerId)
        },
        getAccounts: function () {
            this.axios({
                url: "/info/account/selectAll",
                params: {

                }
            }).then(rs => {
                console.log(rs)
                this.accounts = rs.data.accounts
            })
        },
        searchPage: function () {
            this.axios({
                url: "/info/type/typeByPage",
                params: {
                    kind: "收入",
                    status: 1
                }
            }).then(rs => {
                console.log(rs.data)
                this.getList = rs.data.pageInfo
                console.log(this.getList)

            })
        },
        addRow: function () {
            this.tableData.push({
                type: '',
                money: '',
                remark: '',
            })
        },
        goto() {
            this.$router.push(this.path)
        },
        goto(to) {
            this.$router.push(to)
        }
    },
    created: function () {
        this.id = this.$route.query.id;
        this.otherInForm.id = this.$route.query.id;
        this.searchPage()
        this.getAccounts()
        this.selectByInForm()
        this.searchPage1(1, 5)
    }
}
</script>

<style>
tr {
    border: 1px solid black;
}
</style>
